<template>
  <div class="skip">
    <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F3/u701.svg" alt="" class="im1">
    <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F3/u686.svg" alt="" class="im2">
    <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F3/u702.svg" alt="" class="im3">
    <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F3/u685.svg" alt="" class="im4">
    <h3>本周榜单新鲜出炉>>></h3>
    <div class="box4">
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p36.png" alt="">
    </div>
    <div class="box5">
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p20.png" alt="">
    </div>
    <div class="box6">
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p38.png" alt="">
    </div>
    <div class="bottom">
      <div class="box1"><span>Top2</span></div>
      <div class="box2"><span>Top1</span></div>
      <div class="box3"><span>Top3</span></div>
    </div>
  </div>
  <div class="mainpush">
  <h3>首当其冲</h3>
  <div class="pushbox">
    <div class="left">
      <h3>一秒幻彩 从心出发</h3>
      <p>快来参与小米10周年庆典</p>
      <button>围观>>>>></button>
    </div>
    <div class="right">
      <div class="r-top">
        <h3>小米黑科技</h3>
        <p>科技成就未来</p>
        <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p36.png" alt="">
      </div>
      <div class="r-bottom">

        <h3>冰箱保鲜季</h3>
        <p>冰箱价保30天</p>
        <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E6%90%9C%E7%B4%A2%E7%AD%9B%E9%80%89/p66.png" alt="">
      </div>
    </div>
  </div>
</div>
<div class="come">
  <h3>来一匹</h3>
  <div class="comebox">
    <div>
      <h4>柔的一匹</h4>
      <p>纵向丝滑</p>
      <section>
        <span>查看</span>
      </section>
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p24.png" alt="">
      <i>￥1999</i>
    </div>
    <div>
      <h4>省的一匹</h4>
      <p>穷人的生活</p>
      <section>
        <span>查看</span>
      </section>
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F3/p127.png" alt="">
      <i>￥19.9</i>
    </div>
    <div>
      <h4>快的一匹</h4>
      <p>这可是5g</p>
      <section>
        <span>查看</span>
      </section>
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p36.png" alt="">
      <i>￥5999</i>
    </div>
    
  
  </div>
</div>
<div class="happy">
  <h3>快乐一下</h3>
  <van-card v-for="item in list" @click="jumptodeatil"
  :num="item.saleNum"
  
  :price="item.price"
  
  :title="item.title"
  :thumb="item.image"
  :origin-price="item.originPrice"
/>
</div>
</template>

<script>
import { getHomeData } from '../api/home';
import { Card } from 'vant';
import { ref } from 'vue';
export default {
  name: 'Skip',
  setup(){
    const list=ref([])
    async function happy(){
      const result=await getHomeData()
     const{items}=result
     list.value.push(...items.list)
    }
    happy() 
    return{
    list
  }
},
methods:{
  jumptodeatil(){
    this.$router.push({
      path:'goods_detail'
    })
  }
}
}
</script>

<style lang="less" scoped>
.skip{
  width: 100%;
  height: 211px;
  margin-top: 50px;
  position: absolute;
  background: #ee2c2c;
  h3{
    position: absolute;
    left: 105px;
    top: 20px;
    color: #fff;
    font-size: 20px;
  }
.im1,.im2,.im3,.im4{
  position: absolute;
}
.im1{
  top: 10px;
  left: 20px;

}
.im2{
  top: 60px;
  left: 100px;

}
.im3{
  top: 80px;
  left: 240px;
}
.im4{
  top: 60px;
  left: 280px;
}
 
}
.bottom{
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  .box1{
    position: absolute;
    width: 100px;
    height: 24px;
    border: 1px solid #fff;
    bottom: 0px ;
    left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
  }
  .box2{
    position: absolute;
    width: 100px;
    height: 48px;
    border: 1px solid #fff;
    bottom: 0px ;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
      font-size: 24px;
      font-weight: bold;
      color: #fff;
    }
    
  }
  .box3{
    position: absolute;
    width: 100px;
    height: 24px;
    border: 1px solid #fff;
    bottom: 0px ;
    left: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
    
  }
}
.box4,.box5,.box6{
  position: absolute;
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 10px;
  img{
    width: 100%;
    height: 100%;
  }
}
.box4{
  left:30px ;
  bottom:30px ;
}
.box5{
  left:148px ;
  bottom:50px ;
}
.box6{
  left:270px ;
  bottom:30px ;
}
.mainpush{
  padding-top: 250px;
  background: #eee;
}
.pushbox{
  width: 100%;
  display: flex;
  justify-content: center;
  .left{
    width: 210px;
    height: 210px;
    background: url('https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F3/u724.svg');
    p{
      color: #fff;
      font-size: 14px;
      margin-left: 20px;
    }
    button{
      outline: none;
      border: 1px solid #fff;
      background: rgba(255,255,255,0.1);
      font-size: 14px;
      color: #fff;
      margin-left: 20px;
    }
    h3{
      margin-left: 20px;
    }
  }
  
}
.pushbox .right .r-top{
  width: 134px;
  height: 105px;
  position: relative;
  img{
    position: absolute;
    width: 60px;
    height: 60px;
    right: 0px;
    bottom: 0px;
  }
  h3{
    margin: 0;
  }
  p{
    color: #ff5722;
    font-size: 14px;
  }
}
.pushbox .right .r-bottom{
  width: 134px;
  height: 105px;
  position: relative;
  img{
    position: absolute;
    width: 60px;
    height: 60px;
    right: 0px;
    bottom: 0px;
  }
 h3{
  margin: 0;
 }
 p{
    color: #ff5722;
    font-size: 14px;
  }
}
.come{
  width: 100%;
  background: #eee;
  .comebox{
  width: 100%;
  display: flex;
  justify-content: space-around;
  div{
    width: 108px;
    height: 200px;
    background: #d1eeee;
    border-radius: 10px;
    box-sizing: border-box;
    section{
      width: 52px;
      height: 24px;
      background: #ff7f00;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      border-radius: 10px;
      margin-left: 20px;
    }
    h4{
      padding-left: 20px;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
    }
    p{
      padding-left: 20px;
      color: #fff;
      font-size: 12px;
    }
    
    img{
      width: 60px;
      height: 60px;
      padding-left: 20px;
    }
    i{
      color: #fff;
      padding-left: 20px;
    }
  }
  }
  
}

</style>
